<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-03-04 11:47:10
 * @LastEditors: voanit
 * @LastEditTime: 2022-03-07 09:56:34
-->
<template>
  <div class="xtx-goods-page" v-if="goods.categories">
    <div class="container">
      <!-- 面包屑 -->
      <!-- <pre>{{ goods }}</pre> -->
      <xtxBread>
        <xtxBreadItem to="/">首页</xtxBreadItem>
        <xtxBreadItem to="/"> {{ goods.categories[1].name }}</xtxBreadItem>
        <xtxBreadItem to="/">{{ goods.categories[0].name }}</xtxBreadItem>
        <xtxBreadItem to="/">{{ goods.name }}</xtxBreadItem>
      </xtxBread>
      <!-- 商品信息 -->

      <!-- 商品信息 -->
      <div class="goods-info">
        <!-- 图片预览区 -->
        <div class="media">
          <!-- 左侧 -->
          <!-- 放大镜组件 -->
          <XtxImageView :imageList="goods.mainPictures"></XtxImageView>
          <!-- 商品统计 -->
          <goodsSale :goods="goods"></goodsSale>
        </div>
        <!-- 商品信息区 -->
        <!-- 右侧 -->
        <div class="spec">
          <goodsInfo :goods="goods"></goodsInfo>
          <!-- Sku组件 -->
          <goodsSku :goods="goods" @skuChange="skuChange"></goodsSku>
          <!-- 数量加减 -->
          <xtxNumbox
            v-model="count"
            :max="goods.inventory > 0 ? goods.inventory : 1"
          ></xtxNumbox>

          <xtxButton type="primary" @click="insertCart">加入购物车</xtxButton>

          <!-- <xtxNumbox
            v-model="count2"
            :max="goods.inventory > 0 ? goods.inventory : 1"
          ></xtxNumbox>=={{count2}} -->
        </div>
      </div>

      <!-- 商品详情 -->
      <div class="goods-footer">
        <div class="goods-article">
          <!-- 商品+评价 -->
          <!-- <div class="goods-tabs"></div> -->
          <GoodsDetail :goods="goods"></GoodsDetail>
        </div>
        <!-- 24热榜+专题推荐 -->
        <div class="goods-aside">
          <GoodsHot type="1"></GoodsHot>
          <GoodsHot type="2"></GoodsHot>
          <GoodsHot type="3"></GoodsHot>
        </div>
      </div>
    </div>
  </div>

  <div
    v-else
    style="width: 200px; height: 200px; margin: 0 auto; text-align: center"
  >
    <img src="../../assets/images/loading.gif" />
  </div>
</template>

<script>
// import * as qq   from  'vue-router'
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { reqFindGoods } from "@/api/goods";
import { reactive, ref } from "vue";
import goodsInfo from "./components/goods-info.vue";
import goodsSale from "./components/goods-sale.vue";
import goodsSku from "./components/goods-sku.vue";
import GoodsDetail from "./components/goods-detail.vue";
import GoodsHot from "./components/goods-hot.vue";

import { message } from "@/components/Message";

export default {
  name: "XtxGoodsPage",
  components: {
    goodsInfo,
    goodsSale,
    goodsSku,
    GoodsDetail,
    GoodsHot,
  },
  setup() {
    const count = ref(1);
    // const count2 = ref(2);
    const route = useRoute();
    const store = useStore();
    var goods = reactive({});
    const currSku = ref({});
    const getGoodInfo = async () => {
      console.log(9);
      const res = await reqFindGoods(route.params.id);
      console.log(res, 7);
      // goods = { ...res.result };
      // console.log(goods, 999);
      Object.assign(goods, res.result);
    };
    getGoodInfo();

    // var goods = ref({});
    // const getGoodInfo = async () => {
    //   console.log(9);
    //   const res = await reqFindGoods(route.params.id);
    //   goods.value = res.result;
    // };
    // getGoodInfo();
    const skuChange = (skuObj) => {
      console.log(skuObj, 6666);
      // if (skuObj.skuId) {
      // }
      currSku.value = skuObj;
    };

    // 添加到购物车
    const insertCart = () => {
      /* 
      1-必须选择sku
      2-判断是否有库存
      3-获取商品信息===11参数
      4-将数据存储到vuex中
      */
      if (!currSku.value.skuId) {
        //  表示没有选择sku
        return message({
          type: "error",
          text: "请选择规格",
        });
      }
      if (count.value > currSku.value.inventory) {
        // 表示当前选中的数量不能大于库存值
        return message({
          type: "error",
          text: "当前选中的数量不能大于库存值",
        });
      }

      console.log(goods, 9991);
      store.dispatch("cart/asyncInsertCart", {
        id: route.params.id,
        name: goods.name,
        picture: goods.mainPictures[0],
        skuId: currSku.value.skuId,
        price: currSku.value.oldPrice,
        nowPrice: currSku.value.price,
        attrsText: currSku.value.specsText,
        stock: currSku.value.inventory,
        selected: true, // 选中
        isEffective: true, // 是否有效
        count: count.value, // 商品数量
      });
    };

    return { goods, skuChange, count, insertCart };
  },
};
</script>

<style scoped lang="less">
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}
.goods-footer {
  display: flex;
  margin-top: 20px;
  .goods-article {
    width: 940px;
    margin-right: 20px;
  }
  .goods-aside {
    width: 280px;
    min-height: 1000px;
  }
}
.goods-tabs {
  min-height: 600px;
  background: #fff;
}
.goods-warn {
  min-height: 600px;
  background: #fff;
  margin-top: 20px;
}
</style>
